<template>
  <div>
    <div style="text-align: right">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="账号信息">
          <el-input
            v-model="formInline.account"
            placeholder="账号信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态信息">
          <el-select
            v-model="formInline.status"
            placeholder="状态信息"
            style="width: 120px"
          >
            <el-option label="有效" value="shanghai"></el-option>
            <el-option label="无效" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button type="success" @click="onAdd">添加</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        title="用户信息"
        :visible.sync="dialogFormVisible"
        width="500px"
        center
      >
        <el-form label-position="left" :model="editForm">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="editForm.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input
              show-password
              v-model="editForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="editForm.status" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSave">保 存</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      @current-change="handleCurrentChange"
      border
    >
      <el-table-column label="ID" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" width="380">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.role_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <mypagination
      :totalsize="pageinit.totalSize"
      :currentPage="pageinit.currentPage"
      :pageSize="pageinit.pageSize"
      @changeSize="changeSize"
      @changeCurrentPage="changeCurrentPage"
    ></mypagination>
  </div>
</template>
<script>
import mypagination from '@/components/mypagination.vue';
export default {
  components: { mypagination },
  data() {
    return {
      currentRow: null,

      tableData: [],
      //分页数据 初始化的时候
      pageinit: {
        currentPage: 1,
        pageSize: 5,
        totalSize: 0,
      },
      formInline: {
        account: '',
        status: '',

      },
      //用于决定弹窗的隐藏和显示
      dialogFormVisible: false,
      //新增和编辑的时候，页面中显示的内容和双向绑定的内容
      editForm: {
        account: "",
        password: "",
        status: "",

      },
      formLabelWidth: '80px'
    }
  },
  created() {
    this.findAllManager();
  },
  methods: {
    handleEdit(index, id) {
      console.log(index, id);
    },
    handleDelete(id) {
      this.$axios
        .delete(
          "/rbac_manager/crud/" + id
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            //重新刷新下表单数据
            this.findAllManager();
          }
        })
        .catch(() => { });
    },
    //初始化表单数据用
    findAllManager() {
      this.$axios
        .get(
          "/rbac_manager/crud/" +
          this.pageinit.currentPage +
          "/" +
          this.pageinit.pageSize
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            //对总数量进行赋值
            this.pageinit.totalSize = res.data.data.total;
          }
        })
        .catch(() => { });
    },
    onSearch() {
      console.log('submit!');
    },
    onAdd() {
      this.dialogFormVisible = true;
      this.editForm.account = '';
      this.editForm.password = '';
      this.editForm.status = '';
    },
    onSave() {
      this.$axios.post('/rbac_manager/crud', this.editForm).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //关闭弹窗
          this.dialogFormVisible = false;
          //重新刷新下表单数据
          this.findAllManager();
        }
      }).catch();
    },
    changeSize(val) {
      this.pageinit.pageSize = val;
      this.pageinit.currentPage = 1;
      // 重新调用获取数据方法
      this.findAllManager();
    },
    changeCurrentPage(val) {
      this.pageinit.currentPage = val;
      // 重新调用获取数据方法
      this.findAllManager();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
  },

}
</script>
